<template>
    <div id="reginter-context">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="uname">
                <el-input v-model="ruleForm.uname"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
                <el-input v-model="ruleForm.pwd"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="xm">
                <el-input v-model="ruleForm.xm"></el-input>
            </el-form-item>
            <el-form-item label="性別" prop="xb">
                <el-radio-group v-model="ruleForm.xb">
                    <el-radio label="男" value="1"></el-radio>
                    <el-radio label="女" value="2"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="联系电话" prop="telephone">
                <el-input v-model="ruleForm.telephone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>

            <el-form-item style="text-align: center;  padding-top: 27px;">
                <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
  export default {
    name: 'Register',
    data() {
        return {
            ruleForm: {
                uname: '',
                pwd: '',
                xm: '',
                xb :'男',
                telephone: '', 
                email : ''
            },
            rules: {
                uname: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                xm: [
                    { required: true, message: '请输入姓名', trigger: 'change' }
                ],
                xb: [
                   
                ],
                telephone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' }
                ],
            }
        };
    },
    methods: {
        submitForm(formName) {
            var self = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    debugger
                    var url = self.HOME + '/register'; 
                    self.$axios({
                        method: 'post',
                        url: url,
                        data: self.ruleForm
                    }).then(function (res) {
                        if (res.data.code == '1') {
                            self.$confirm('注册成功, 是否返回登录页?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'success'
                            }).then(() => {
                                //跳转登录页
                                self.$router.replace({ path: '/login' });
                            })
                        } else {
                            self.$message({
                                showClose: true,
                                message: res.data.msg || '注册失败！',
                                type: 'error'
                            });
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }

  }
</script>

<style>
    #reginter-context{
        width: 50%;
        border: 0px solid;
        border-radius: 1%;
        padding: 54px;
        box-shadow: 0px 0px 16px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

</style>


